body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

header {
    text-align: center;
    padding: 10px;
    background-color: #f8f9fa;
}

/* Default style */
h1 {
    font-family: Arial, sans-serif; /* Use Arial font family */
    white-space: nowrap;
    color: #f36633;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(16px + 1vw);
    margin: 0;
}

/* Style for iPhones */
@media only screen 
  and (max-device-width: 1900px) 
  and (-webkit-device-pixel-ratio: 2) { 
    h1 {
        font-family: Arial, sans-serif; /* Use Arial font family */
    }
}

main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#camera-view {
    width: 100%; /* Ensures full width */
    /* Remove padding-top approach for dynamic height */
    height: 75vh; /* Adjusted to use more vertical space */
    max-height: 75vh; /* Ensures it doesn't exceed the vertical space */
    position: relative;
}

video, canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed to 'contain' to ensure aspect ratio is maintained without cropping */
}

footer {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background-color: #f8f9fa;
}

button {
    font-size: calc(10px + 1vmin);
    padding: 10px 20px;
    flex: 1;
    margin: 0 5px;
    max-width: 160px;
}

@media (max-width: 480px) {
    h1 {
        font-size: calc(14px + 2vmin);
    }
    footer {
        flex-wrap: nowrap;
    }
}